﻿
@{
    ViewData["Title"] = "WebSocket聊天室";
}

<div class="container-fixed-md">
    <div class="row">
        <div class="col-lg-10" style="margin-bottom:10px;">
            <div class="input-group col-lg-10">
                <input type="text" class="form-control" id="NickName">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="btn_AddChat">加入聊天室</button>
                </span>
            </div>
        </div>
        <div class="col-lg-10" style="margin-bottom:20px;">
            <div class="input-group col-lg-10">
                <input type="text" class="form-control" id="ChatMeesageText">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="btn_SendMessage">发送消息</button>
                </span>
            </div>
        </div>
        <div class="col-lg-10" style="margin-bottom:20px;">
            <div class="col-lg-7">
                <div class="panel">
                    <div class="panel-heading">
                        Chat聊天室[<span id="LineState">等待连接</span>]
                    </div>
                    <div class="panel-body" id="ChatMessageList">
                        
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel">
                    <div class="panel-heading">
                        Chat用户列表
                    </div>
                    <div class="panel-body">
                        <div class="list-group" id="articleclassifyList">
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">
        //Socket实例
        var ChatSocket = function () {
            var ws = null;//WebSocket对象
            //创建服务器连接
            ChatSocket.OpenConnection = function (tokenId) {
                ///初始化对象
                ws = new WebSocket("ws://127.0.0.1:3907/ws");
                //启动消息
                if (ws != null) {
                    try {
                        ws.onopen = function (event) {
                            console.log("success");
                        };
                        //接收消息
                        ws.onmessage = function (event) {
                            var json = JSON.parse(event.data);
                            console.log(json);
                            if (json.MessageType == 98) {
                                $("#NickName").attr("disabled", true);
                                $("#btn_AddChat").attr("disabled", true);
                                //
                                var my = '<a href="#" class="list-group-item active">' + nickName + '</a>';
                                $("#articleclassifyList").append(my);
                                //插入其它用户
                                var other = json.MessageBody.split('|');
                                for (var i = 0; i < other.length; i++) {
                                    var htm = '<a href="#" class="list-group-item">' + other[i] + '</a>';
                                    $("#articleclassifyList").append(htm);
                                }
                            }
                            else if (json.MessageType == 99) {
                                var htm = '<a href="#" class="list-group-item">' + json.MessageBody + '</a>';
                                $("#articleclassifyList").append(htm);
                            }
                            else if (json.MessageType == 2) { 
                                //处理来自其它用户的聊天消息
                                var htm = '<div class="alert">' + json.MessageBody + '</div>';
                                $("#ChatMessageList").prepend(htm);
                            }
                        };
                        ws.onclose = function (event) {
                            ws = null;
                            console.log("连接已经被关闭");
                        };
                        ws.onerror = function (event) {
                            console.log(event);
                            console.log("连接服务器异常");
                        };
                    }
                    catch (ex) {
                        console.log(ex.message);
                    }
                }
                else {
                    console.log("已经与服务器断开连接");
                }
            };
            //发送消息
            ChatSocket.SendMessage = function (message) {
                if (ws != null) {
                    ws.send(message);
                }
                else {
                    alert("当前连接已断开,消息不能发送出去");
                }
            };
            return ChatSocket;
        };
   </script>
    <script type="text/javascript">
        
        //定义参数信息
        var nickName = '我是用户@(System.Guid.NewGuid().ToString().Replace("-","").ToUpper())';
        var tokenID = '@(System.Guid.NewGuid().ToString().Replace("-","").ToUpper())';
        //初始化WebSocket
        var chat = new ChatSocket();
        chat.OpenConnection(tokenID);
        //事件处理
        //进入聊天室
        $("#btn_AddChat").click(function () {
            nickName = $("#NickName").val();
            //当连接成功后向服务器发送一条连接消息
            var message = '{"MessageType":1,"SendTokenID":"' + tokenID + '","ReceiveTokenID":"0","MessageBody":"' + nickName + '"}';
            chat.SendMessage(message);
        });
        //发送消息
        $("#btn_SendMessage").click(function () {
            var messageText = $("#ChatMeesageText").val();
            if (messageText != "") { 
                var message = '{"MessageType":2,"SendTokenID":"' + tokenID + '","ReceiveTokenID":"0","MessageBody":"' + messageText + '"}';
                chat.SendMessage(message);
                
                //添加当前用户
                var htm = '<div class="alert  alert-success ">' + messageText + '</div>';
                $("#ChatMessageList").prepend(htm);
                //清空聊天记录
                $("#ChatMeesageText").val('');
            }
        });
    </script>
}
